<template>
  <!--  <keep-alive>
      <router-view/>
    </keep-alive>-->
  <!--  <keep-alive :include="cachePageName">
      <router-view v-if="route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!route.meta.keepAlive"></router-view>-->
    <router-view v-slot="{ Component, route }">
<!--   cachedViews中的值需要与组件的name一致     -->
        <keep-alive :include="cachedViews">
            <component :is="Component" :key="route.fullPath"/>
        </keep-alive>
    </router-view>
</template>
<script lang="ts">
import {computed, defineComponent, onMounted, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router';
// import { useStore } from 'vuex';
// import {useStore} from '@/store'

export default defineComponent({
    name: 'App',
    components: {},
    setup() {
        const bgColor = '#4dbbbd';
        // const store = useStore();
        const route = useRoute();
        const router = useRouter();
        const cachedViews = computed(() => {
          return []
        });
        onMounted(() => {
            addTags()
        })
        // 监听路由的变化，动态赋值给 tagsView
        watch(route, (_to: any) => {
            addTags();
        });
        const addTags = () => {
            const {name, meta} = route;
            if (name && meta.keepAlive) {
                store.dispatch('tagsView/addView', route)
            }
            return false
        };
        return {
            cachedViews,
            bgColor
        }
    },
})
</script>
<style lang="scss">
///*每个页面公共css */
//@import url("assets/iconfont/iconfont.css");
//
//  /*每个页面公共css */
//  @import '@/styles/index.scss';
html, body, #app {
  height: 100%;
  overflow: hidden;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  //text-align: center;
  color: #2c3e50;
  //margin-top: 60px;
}

html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 14px;
  font-family: "Microsoft YaHei", 微软雅黑;
}

.page-content-wrap {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* ie10+ */
  overflow-x: hidden;
}

.page-content-wrap ::-webkit-scrollbar {
  display: none;
}

.van-collapse-item__content {
  padding: 10px !important;
}
</style>
